import React, {  useEffect, useRef, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { Header, AlertTip } from 'src/components'
import classNames from "classnames"
import { CLEAR_CART } from 'src/redux/action-type'
import { payRequest } from 'src/api/getData'
import { useHistory } from "react-router-dom"
import './index.scss'

const Payment = () => {
    const { orderMessage, userInfo, shopid, cartPrice } = useSelector(state => state)
    const history = useHistory()
    const dispatch = useDispatch()
    const [payDetail, setPayDetail] = useState({})
    const [showAlert, setShowAlert] = useState(false)
    const [alertText, setAlertText] = useState()
    const [payWay, setPayWay] = useState(1) //付款方式

    const [countNum, setCountNum] = useState(900) //倒计时15分钟
    const [gotoOrders, setGotoOrders] = useState(false) //去付款
    const timerRef = useRef(null)

    //时间转换
    const remaining = () => {
        let minute = parseInt(countNum / 60);
        if (minute < 10) {
            minute = '0' + minute;
        }
        let second = parseInt(countNum % 60);
        if (second < 10) {
            second = '0' + second;
        }
        return '00 : ' + minute + ' : ' + second;
    }

    useEffect(() => {
        //初始化信息
        const initData = async () => {
            let res = await payRequest(orderMessage.order_id, userInfo.user_id);
            setPayDetail(res)
            if (res.message) {
                setShowAlert(true)
                setAlertText(res.message)
                return
            }
        }

        initData()

    }, [orderMessage.order_id, userInfo.user_id])

    useEffect(() => {
        //倒计时
        const remainingTime = () => {
            clearInterval(timerRef.current);
            let count = 900;
            timerRef.current = setInterval(() => {
                count--;
                if (count === 0) {
                    clearInterval(timerRef.current);
                    setShowAlert(true)
                    setAlertText('支付超时')
                }
                setCountNum(count)
            }, 1000);
        }
        remainingTime()

    }, [])

    useEffect(() => {
        if (shopid) {
            //清除购物车中当前商铺的信息
            dispatch({
                type: CLEAR_CART,
                shopid
            })
        }
    }, [dispatch, shopid])


    //确认付款
    const confrimPay = () => {
        setShowAlert(true)
        setAlertText('当前环境无法支付，请打开官方APP进行付款')
        setGotoOrders(true);
    }

    //关闭提示框，跳转到订单列表页
    const closeTipFun = () => {
        setShowAlert(false)
        if (gotoOrders) {
            history.push('/order');
        }
    }

    return <div className="page_confirmorder_payment">
        <Header title="在线支付" goBack></Header>
        <section className="show_time_amount">
            <section>
                <header className="time_last">支付剩余时间</header>
                <p className="time">{remaining()}</p>
                {payDetail.resultData && <footer className="order_detail">
                    <span>详情</span>
                    <span>¥ {(cartPrice && cartPrice.toFixed(2)) || (payDetail.resultData.orderInfo.orderAmount && (payDetail.resultData.orderInfo.orderAmount / 100).toFixed(2))}</span>
                </footer>}
            </section>
        </section>
        <div className="pay_way">选择支付方式</div>
        <section className="pay_way_list">
            <section className="pay_item">
                <div className="pay_icon_contaienr">
                    <div className="zhifubao"></div>
                    <span>支付宝</span>
                </div>
                <svg onClick={() => { setPayWay(1) }} className={classNames('choose_icon', { choosed_way: payWay === 1 })}>
                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#select"></use>
                </svg>
            </section>
            <section className="pay_item">
                <div className="pay_icon_contaienr">
                    <svg>
                        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#weixin"></use>
                    </svg>
                    <span>微信</span>
                </div>
                <svg onClick={() => { setPayWay(2) }} className={classNames('choose_icon', { choosed_way: payWay === 2 })}>
                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#select"></use>
                </svg>
            </section>
        </section>
        <p className="determine" onClick={confrimPay}>确认支付</p>
        {showAlert && <AlertTip onClose={closeTipFun} alertText={alertText}></AlertTip>}
    </div>
}

export default Payment